@let processedDatabuckets = processedDatabuckets$ | async;
@let activeDatabucket = activeDatabucket$ | async;

<div class="d-flex h-100">
  <app-databuckets-menu class="h-100"></app-databuckets-menu>

  <div class="d-flex flex-column flex-fill mh0">
    @if (activeDatabucket) {
      <ng-container [formGroup]="activeDatabucketForm">
        <!-- Name -->
        <div class="input-group pt-2 px-2">
          <input
            type="text"
            class="form-control"
            placeholder="Databucket name"
            formControlName="name"
            [appFocusOnEvent]="focusableInputs.DATABUCKET_NAME"
          />
        </div>

        <!-- Documentation -->
        <div class="input-group mt-2 px-2">
          <input
            type="text"
            class="form-control"
            placeholder="Add documentation for these data"
            formControlName="documentation"
          />
        </div>

        <!-- Editor -->
        <div
          class="flex-fill mt-2 mb-3 px-2"
          *ngIf="bodyEditorConfig$ | async as bodyEditorConfig"
        >
          <app-editor
            class="h-100"
            [options]="bodyEditorConfig?.options"
            mode="json"
            [uuid]="activeDatabucket.uuid"
            formControlName="value"
          >
          </app-editor>
        </div>

        <div
          class="d-flex justify-content-between align-items-center environment-databuckets-footer px-2"
        >
          <button
            class="btn btn-link btn-icon ps-0"
            ngbTooltip="Data ID (can be used within data and dataRaw templating helpers). Click to copy."
            (click)="copyToClipboard(activeDatabucket.id)"
          >
            <small class="p-0">Unique ID: {{ activeDatabucket.id }}</small>
          </button>

          <button
            id="databucket-processed-status"
            class="btn btn-link btn-icon pe-0"
            [ngClass]="{
              'text-muted':
                !processedDatabuckets[activeDatabucket.uuid]?.parsed,
              'text-success':
                processedDatabuckets[activeDatabucket.uuid]?.parsed &&
                processedDatabuckets[activeDatabucket.uuid].validJson,
              'text-warning':
                processedDatabuckets[activeDatabucket.uuid]?.parsed &&
                !processedDatabuckets[activeDatabucket.uuid].validJson,
              'cursor-default':
                !processedDatabuckets[activeDatabucket.uuid]?.parsed
            }"
            [ngbTooltip]="
              processedDatabuckets[activeDatabucket.uuid]?.parsed
                ? processedDatabuckets[activeDatabucket.uuid].validJson
                  ? 'Generated content is valid JSON. Click to view current value.'
                  : 'Generated content is not valid JSON (will be stored as a string). Click to view current value.'
                : processedDatabuckets[activeDatabucket.uuid]
                  ? 'Not parsed yet (request helpers detected)'
                  : 'Not parsed yet (server is not running)'
            "
            (click)="
              processedDatabuckets[activeDatabucket.uuid]?.parsed &&
                showDatabucketValue(
                  activeDatabucket.uuid,
                  processedDatabuckets[activeDatabucket.uuid].validJson,
                  activeDatabucket.name
                )
            "
          >
            <small class="p-0"><app-svg icon="data"></app-svg></small>
          </button>
        </div>
      </ng-container>
    } @else {
      <p class="message mt-4">
        {{
          (hasDatabuckets$ | async)
            ? 'No databucket selected'
            : 'No databucket defined'
        }}
      </p>
    }
  </div>
</div>
